<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Spinner Test page</title>
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.spinner.js"></script>


<script type="text/javascript">
$(function(){
	var itemList = [
		{url: "http://ejohn.org", title: "John Resig"},
		{url: "http://bassistance.de/", title: "J&ouml;rn Zaefferer"},
		{url: "http://snook.ca/jonathan/", title: "Jonathan Snook"},
		{url: "http://rdworth.org/", title: "Richard Worth"},
		{url: "http://www.paulbakaus.com/", title: "Paul Bakaus"},
		{url: "http://www.yehudakatz.com/", title: "Yehuda Katz"},
		{url: "http://www.azarask.in/", title: "Aza Raskin"},
		{url: "http://www.karlswedberg.com/", title: "Karl Swedberg"},
		{url: "http://scottjehl.com/", title: "Scott Jehl"},
		{url: "http://jdsharp.us/", title: "Jonathan Sharp"},
		{url: "http://www.kevinhoyt.org/", title: "Kevin Hoyt"},
		{url: "http://www.codylindley.com/", title: "Cody Lindley"},
		{url: "http://malsup.com/jquery/", title: "Mike Alsup"}
	];
	
	var opts = {
		's1': {},
		's2': {stepping: 0.25},
		's3': {currency: '$'},
		's4': {},
		's5': {
			init: function(ui) {
				for (var i=0; i<itemList.length; i++) {
					ui.add(itemList[i].title +' <a href="'+ itemList[i].url +'" target="_blank">&raquo;</a>');
				}
			}
		}
	};

	for (var n in opts)
		$("#"+n).spinner(opts[n]);

	$("button").click(function(e){
		var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
		if (ns != null)
			$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
	});

});
</script>

<style type="text/css">

body
{
	background: #fff;
	font-family: Arial;
}

label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	width: 15em;
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	background: #FEFEFE url(../images/spinner-bg.gif) repeat-x left bottom;
	padding: 0 5px;
}

.ui-spinner-disabled {
	background: #F4F4F4;
	color: #CCC;
}

.ui-spinner-box {
	width: 90%;
	height: 100%;
	float: left;
	font-size: 125%;
	border: none;
	background: none;
	padding: 0;
}

.ui-spinner-up,
.ui-spinner-down {
	width: 10%;
	height: 50%;
	font-size: 0.5em;
	padding: 0;
	margin: 0;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 0;
	cursor: default;
	border: 1px solid #999;
	border-right: none;
	border-top: none;
}

.ui-spinner-down {
	bottom: 0;
	border-bottom: 0;
}

.ui-spinner-pressed {
	background: #FEFEFE;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}

</style>
</head>

<body>

<h1>jQuery UI Spinner Test Page</h1>

<p>This is a visual test page for developers and demonstrates some of the features included in ui.spinner. Mousewheel support is provided by the <a href="http://plugins.jquery.com/project/mousewheel">mousewheel plugin</a>.</p>

<p><label for="s1">Basic: </label>
<input type="text" id="s1" value="10" /></p>

<p>
<button id="s1-disable">disable</button>
<button id="s1-enable">enable</button>
<button id="s1-destroy">destroy</button>
<button id="s1-create">create</button>
</p>

<hr />

<p><label for="s2">Decimal: </label>
<input type="text" id="s2" value="10.25" /></p>

<p>
<button id="s2-disable">disable</button>
<button id="s2-enable">enable</button>
<button id="s2-destroy">destroy</button>
<button id="s2-create">create</button>
</p>

<hr />

<p><label for="s3">Currency: </label>
<input type="text" id="s3" /></p>

<p>
<button id="s3-disable">disable</button>
<button id="s3-enable">enable</button>
<button id="s3-destroy">destroy</button>
<button id="s3-create">create</button>
</p>

<hr />

<p><label for="s4">Data List: </label>
<ul id="s4">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
	<li>item 6</li>
	<li>item 7</li>
	<li>item 8</li>
	<li>item 9</li>
	<li>item 10</li>
	<li>item 11</li>
	<li>item 12</li>
	<li>item 13</li>
	<li>item 14</li>
	<li>item 15</li>
	<li>item 16</li>
	<li>item 17</li>
	<li>item 18</li>
	<li>item 19</li>
	<li>item 20</li>
</ul>

<p>
<button id="s4-disable">disable</button>
<button id="s4-enable">enable</button>
<button id="s4-destroy">destroy</button>
<button id="s4-create">create</button>
</p>

<hr />

<p><label for="s5">Presenters: </label>
<div id="s5"></div>

<p>
<button id="s5-disable">disable</button>
<button id="s5-enable">enable</button>
<button id="s5-destroy">destroy</button>
<button id="s5-create">create</button>
</p>

<hr />


</body>
</html>